<script setup>
import { ref } from "vue";
import { useCounterStore } from '../stores/counter';
import { showFailToast, showSuccessToast } from 'vant';
import router from "../router";
const phone = ref('');
const password = ref('');
const sms = ref('');
const status = ref(1)
import { getSms } from '../apis/user.js'
async function getsms() {
   const res = await getSms()
   showSuccessToast(res.data.data)
}
import { login, yzmLogin } from '../apis/user.js'
const onSubmit = async (values) => {
   console.log('submit', values);
   if (status.value === 2) {
      //验证码登录
      if (sms.value === '2245') {
         const res = await yzmLogin(values)
         if (res.data.code !== 1) {
            showFailToast(res.data.msg)
            return
         }
         //登录成功
         showSuccessToast("登录成功")
         //获取token和用户信息
         const userInfo = res.data.data
         //存入token和用户信息
         useCounterStore().setUserInfo({
            token: userInfo.token,
            name: userInfo.name,
            phone: userInfo.phone
         })
         //跳转到首页
         router.push('/')
      } else {
         showFailToast("验证码错误")
      }
      return
   }
   //发送登录请求
   const res = await login(values)
   console.log(res);
   if (res.data.code !== 1) {
      showFailToast(res.data.msg)
      return
   }
   //验证密码成功
   showSuccessToast("登录成功")
   //获取token和用户信息
   const userInfo = res.data.data
   //存入token和用户信息
   useCounterStore().setUserInfo({
      token: userInfo.token,
      name: userInfo.name,
      phone: userInfo.phone
   })
   //跳转到首页
   router.push('/')
};
function mima() {
   status.value = 1
   sms.value = ''
   password.value = ''
}
function yzm() {
   status.value = 2
   sms.value = ''
   password.value = ''
}
</script>
<template>
   <div>
      <h2 style="margin-left: 42%;margin-top: 40%;">登录</h2>
      <van-form @submit="onSubmit" style="margin-top: 10%;">
         <van-cell-group inset>
            <van-field v-model="phone" name="phone" label="手机号" placeholder="手机号"
               :rules="[{ required: true, message: '请填写手机号' }]" />
            <van-field v-if="status === 1" v-model="password" type="password" name="password" label="密码"
               placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]" />
            <van-field v-if="status === 2" v-model="sms" name="ssm" center clearable label="短信验证码"
               placeholder="请输入短信验证码" :rules="[{ required: true, message: '请输入验证码' }]">
               <template #button>
                  <van-button size="small" type="primary" @click="getsms()">发送验证码</van-button>
               </template>
            </van-field>
         </van-cell-group>
         <div style="margin-left: 30%;margin-top: 20px;">
            <van-button type="primary" native-type="submit">
               登录
            </van-button>
            <van-button type="primary" @clike="注册" style="margin-left: 20px;" @click="router.push('/register')">
               注册
            </van-button>
         </div>
      </van-form>
      <button v-if="status === 1" @click="yzm" style="margin-left: 32%;margin-top: 10%;">
         验证码登录>
      </button>
      <button v-if="status === 2" @click="mima" style="margin-left: 34%;margin-top: 10%;">
         密码登录>
      </button>
   </div>
</template>
